<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img{
            width: 60px;
        }
        .wi{
            width: 50px;
        }

    </style>
    <meta name="referrer" content="no-referrer" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>

    <div id="app">
       <h2>豆瓣top250</h2>
       <table class="table table-bordered table-hover">
           <thead>
               <tr>
                   <th>编号</th>
                   <th>名字</th>
                   <th>海报</th>
                   <th>评分</th>
                   <th>是否收藏</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr  v-for="item of movies">
                   <td>{{item._id}}</td>
                   <td @click="handleToggle(item._id)">{{item.title}}</td>
                   <td><img class="img" :src="item.pic" alt=""></td>
                   <td>{{item.rating}}</td>
                   <td>
                       <img class="wi"
                       @click ="handleCollect(item._id)"
                       :src="item.collected?'images/star.png':'images/none-star.png'" alt="">
                   </td>
                   <td>
                       <button @click="handleDelete(item._id)" type="button" class="btn btn-danger">删除</button>
                   </td>
               </tr>
           </tbody>
       </table>
       <nav aria-label="Page navigation" class="text-center">
        <ul class="pagination pagination-lg">
          <li>
            <a href="javascript:void(0)" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li v-for="item of pages"><a @click="doPage(item)" href="javascript:void(0)">{{item}}</a></li>
          <li>
            <a href="javascript:void(0)" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
</nav>
       
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                movies:[],
                total:""
            },
          mounted(){
              $.ajax({
                  url:"http://localhost:4223/top250",
                  success:res=>{
                      console.log(res.res);
                      this.movies =res.res
                      this.total = res.total;
                  }
              })
          },
          methods:{
           async  handleCollect(id){
                console.log(id);
                var movies = this.movies;
                var item = movies.find(item=>{
                    return item._id==id;
                })
                if(item.collected){
                    item.collected = false;
                    await $.ajax({url:"http://localhost:4223/collect/cancel",data:{id},type:"post"})
                }else{
                    item.collected =true;
                    await $.ajax({url:"http://localhost:4223/collect",data:{id},type:"post"})
                }
                this.movies = movies
            },
            //写删除的绑定事件代码
            async handleDelete(id){
                console.log(id);

                var movies = this.movies.filter(item=>{
                    return item._id !=id;
                })
                await $.ajax({url:"http://localhost:4223/delete",data:{id},type:"post"})
                this.movies = movies;
            },
            async doPage(num){
              var start = (num-1)*5
              $.ajax({
                url:`http://localhost:4223/top250?start=${start}`,
                success:res=>{
                    this.movies =res.res
                    this.total = res.total;
                }
            })
          },
          async handleToggle(id){
              console.log(id);
              location.href = `html/detail.html?id=${id}`
          }
            },
            
          
          computed:{
                /*
                23
                
                [0,5,10,15,20]
                [1,2,3,4,5] 
                 */
                pages:function(){
                    var total = this.total;
                    var arr = [];
                    for(var i=0;i<total;i+=5){
                        arr.push(i);
                    }
                    var res = arr.map(item=>{
                        return (item+5)/5
                    })
                    return res;
                }
            }
        })
    </script>
</body>
</html>